<template>
	<div id="appRoot">
		<sidebar>
			<card label="Web展现"></card>
			<div class="data-list clearfix">
				<div class="data-item">
					<div class="data-item_title">
						会员数
						<i class="data-item_icon icon01"></i>
					</div>
					<div class="data-item_content">
						<div class="content-label">会员数</div>
						<div class="content-number">{{data.userCount}}</div>
					</div>
				</div>
				<div class="data-item">
					<div class="data-item_title">
						入库文档数
						<i class="data-item_icon icon02"></i>
					</div>
					<div class="data-item_content">
						<div class="content-label">入库文档数</div>
						<div class="content-number">{{data.docCount}}</div>
					</div>
				</div>
				<div class="data-item">
					<div class="data-item_title">
						抽取指标数
						<i class="data-item_icon icon03"></i>
					</div>
					<div class="data-item_content">
						<div class="content-label">抽取指标数</div>
						<div class="content-number">{{data.labelUse}}</div>
					</div>
				</div>
				<div class="data-item">
					<div class="data-item_title">
						形成图标数
						<i class="data-item_icon icon04"></i>
					</div>
					<div class="data-item_content">
						<div class="content-label">形成图标数</div>
						<div class="content-number">{{data.createImg}}</div>
					</div>
				</div>
				<div class="data-item">
					<div class="data-item_title">
						服务次数
						<i class="data-item_icon icon05"></i>
					</div>
					<div class="data-item_content">
						<div class="content-label">服务次数</div>
						<div class="content-number">{{data.serviceNum}}</div>
					</div>
				</div>
				<div class="data-item">
					<div class="data-item_title">
						地域使用次数
						<i class="data-item_icon icon06"></i>
					</div>
					<div class="data-item_content">
						<div class="content-label">地域使用次数</div>
						<div class="content-number">{{data.areaUse}}</div>
					</div>
				</div>
			</div>
		</sidebar>
	</div>
</template>

<script>
	import sidebar from 'components/layout/sidebar.vue'
	import card from 'components/layout/card.vue'
    import ajax from 'common/ajax.js'
    import ajaxUrls from 'common/ajaxUrls.js'
	export default{
		data(){
			return{
				data: {
                    areaUse: 0,
                    createImg: 0,
                    docCount: 0,
                    labelUse: 0,
                    serviceNum: 0,
                    userCount: 0,
				}
			}
		},
        mounted(){
		    this.getWebShow();
		},
		methods: {
		    getWebShow(){
                ajax({
                    url: ajaxUrls.apiUrl.webShow,
                    action: 'webShow',
                    data: {}
                }).then( data => {
                    if(data.resultCode === '0'){
                        this.data = data.data;
                    }else{
                        this.$message.error(data.resultMsg);
                    }
                })
			}
		},
		components:{
			sidebar,
			card
		}
	}
</script>

<style lang="scss">

	.data-list{
		.data-item{
			float: left;
			margin: 22px 44px 18px 0;
			width: 250px;
			height: 330px;
			background-color: #fff;
			border-radius: 16px;
			box-shadow: 1px 1px 3px #ddd;
			.data-item_title{
				padding-left: 15px;
				font-size: 18px;
				color: #020202;
				height: 54px;
				line-height: 54px;
			}
			.data-item_icon{
				float: right;
				width: 32px;
				height: 32px;
				margin: 13px 9px 0 0;
				background-repeat: no-repeat;
				background-position: 0 0;
			}
			.icon01{
				background-image: url(../../image/homepage/icon01.png)
			}
			.icon02{
				background-image: url(../../image/homepage/icon02.png)
			}
			.icon03{
				background-image: url(../../image/homepage/icon03.png)
			}
			.icon04{
				background-image: url(../../image/homepage/icon04.png)
			}
			.icon05{
				background-image: url(../../image/homepage/icon05.png)
			}
			.icon06{
				background-image: url(../../image/homepage/icon06.png)
			}
			.data-item_content{
				box-sizing: border-box;
				margin-top: 10px;
				padding-top: 56px;
				height: 210px;
				background: url(../../image/homepage/item-bg.png) no-repeat center center;
				text-align: center;
				color: #fff;
			}
			.content-label{
				margin-bottom: 28px;
				font-size: 18px;
				line-height: 28px;
			}
			.content-number{
				font-size: 24px;
				line-height: 32px;
			}
		}
	}
</style>